{% extends "admin/base.html" %}
{% block extrastyle %}
<style>
@font-face {
  font-family: 'icomoon';
  src:  url('/static/admin/fonts/icomoon.eot?a1rbph');
  src:  url('/static/admin/fonts/icomoon.eot?a1rbph#iefix') format('embedded-opentype'),
    url('/static/admin/fonts/icomoon.ttf?a1rbph') format('truetype'),
    url('/static/admin/fonts/icomoon.woff?a1rbph') format('woff'),
    url('/static/admin/fonts/icomoon.svg?a1rbph#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-logo:before {
  content: "\e901";
}
.icon-add:before {
  content: "\e902";
}
.icon-minus:before {
  content: "\e903";
}
.icon-ic-arrow:before {
  content: "\e900";
}

.registration .sidebar {
  min-width: 300px;
  max-width: 300px;
}
.change-form .suffix {
  /*display: none;*/
  visibility: hidden;
}
/* action button mobile hotfix*/
#actionBtn {
  display: none;
  right: 90px;
}

@media only screen and (max-width: 993px){
  nav.topbar .brand-logo {
    font-size: 1.5rem;
    white-space: nowrap;
  }
  .right-panel {
    background: rgba(0,0,0,.7);
    padding: 30px 10px;
  }

  #actionBtn {
    display: block;
  }

  form.content .right-panel {
    position: fixed;
    display: block;
    top:0vh;
    right:-100vw;
    width:90vw;
    height: 100vh;
    overflow: scroll!important;
    z-index: 9;
  }

  form.content .right-panel.open {
    right: -10px;
  }

}

  .no-padding+.no-padding {display: none;}
</style>

{% endblock %}
{% block extrahead %}
<script >
  $('document').ready(function(){

    if ($('.card.filters-card').length && $('.card.actions-card').length) {
      $('body').append('<div id="actionBtn" class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light z-depth-2"><i class="large material-icons">tune</i></a></div>')
    }

    $('#actionBtn').on('click',function(){
      $('.right-panel').toggleClass('open');
      var $actionBtn = $('#actionBtn .btn-large');
      var actionBtnIcon = $($actionBtn,'i');
      var actionBtnText = actionBtnIcon.text();
      $actionBtn.toggleClass('red');
      actionBtnIcon.find('i').text(actionBtnText=='clear'?'tune':'clear')
    })
  })

</script>
{% endblock %}

{% block sidenav_items %}
    <li class="no-padding">
      <a class="collapsible-header" href="/admin">
      <i class="material-icons">home</i>首页</a>
    </li>
    {{ block.super }}
{% endblock %}
